<template>
  <view class="itemSteps" :class="['itemSteps'+`_${ direction } `]">
    <view class="itemSteps_item" v-for="item,indexs in list_" :key="indexs" :style="[styleWidth]"
      :class="[item.class_]">
      <view class="itemSteps_item_list" :style="[{color:fontColor}]">
        <view class="itemSteps__indexs">{{indexs+1}}</view>
        <view class="itemSteps__title">{{item.title}}</view>
      </view>
      <view class="item-line" v-if="indexs<list_.length-1" :style="[styleLine,item.styleLine_]"></view>
    </view>
  </view>
</template>
<script>
import props from './props';
export default {
  mixins: [props],
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler(Node) {
        this.list_ = Node
      }
    }
  },
  computed: {
    styleLine() {
      let t = this;
      let opt = t.list;
      const obj = { height: '8rpx', position: 'absolute', marginTop: '24rpx', left: `${100 / opt.length + 55}%`, width: `${100 / opt.length + 41}%` }
      if (opt.length == 3) {
        obj.width = `${100 / opt.length + 45.9}%`
        obj.left = `${100 / opt.length + 27}%`
      }
      return uni.$u.addStyle(obj)
    },
    styleWidth() {
      let t = this;
      let opt = t.list;
      const obj = {}
      obj.width = obj.width = `${100 / opt.length}%`
      return obj
    }
  },
  data() {
    return {
      list_: []
    }
  }

}
</script>
<style lang="scss" scoped>
@import "./itemStemps.scss";
</style>